<template>
<div>
<setHeader :title="headerTitle" ></setHeader>
  <div class="content"> 
    <div class="search_all_friend">
        <span class="search_span clear">
            <i class="iconfont icon-sousuo"></i>
            <input type="text" v-model="search" placeholder="搜索">
            <i class="iconfont icon-guanbi" v-if="clearShow" @click="clearClick"></i>
        </span>
        <button class="search_cancel fr" @click="searchCancel">搜索</button>
    </div>
    <!-- <div style="font-size: 0.3rem; color: rgb(102, 102, 102); line-height: 0.5rem;height: 0.5rem;margin: 0.4rem 0;" v-if="noResults">
        暂无数据  ╮(￣▽￣)╭
    </div> -->
    <div v-if="noResults" class="contentEmpty" style="margin-top: 1.2rem;">
        <img src="../common/images/Disappointment.png" alt="">
        <em>暂无查询结果</em>
    </div>
    <div class="business_lists" v-for="(user,index) in userList" :key="index">
      <div class="business_left">
        <img :src="user.avatar" v-if="user.avatar" alt="">
        <img src="../common/images/userAvatar.png" alt="" v-else>
      </div> 
      <div class="business_desc"><h5>{{user.username}}</h5></div>
      <div class="btn_small_red" style="margin-top:0 !important;margin: auto;">
        <button v-if="user.can_apply !== false" @click="handleAddFriend(user)">添加</button>
        <button   v-if="user.can_apply === false" style="background:#999999;">已添加</button>
      </div> 
    </div>
  </div>
	<so-footer></so-footer>
</div>
  
</template>

<script>
import setHeader from '../public/setHeader.vue';
import soFooter from '../components/footer-bar';
import {uerList, createApply, search} from '../api/api'
  export default {
    data() {
      return {
        headerTitle: '添加好友',
        haveNotReadApply: false,
        search: '',
        userList: [],
        noResults: false,

        searchISshow: true,   //关键字搜索框出现
        clearShow: false,     //清除内容
      }
    },
    components: {
      setHeader,
      soFooter
    },
    watch: {
        search(value) {
            if(value != '') {
              this.clearShow = true;
            }else {
              this.clearShow = false;
            }
        }
    },
    methods: {
      // 清除内容
      clearClick() {
          this.userList = [];
          this.search = '';
          this.noResults = false;
      },
      // 点击搜索
      searchCancel() {
        this.handleUserList();
      },
      //好友列表
      handleUserList () {

        let access_token = window.localStorage.getItem('access_token');
        uerList({search: this.search, access_token: access_token}).then(res => {
          console.log('信息',res.userList)
          // if (parseInt(res.status) === 1) {
          //   this.userList = res.data;
          // }
          
          if(res.status == 1) {
            if(res.userList == '' || this.search == '') {
              this.noResults = true;
              this.userList = [];
            }else {
              this.noResults = false;
              this.userList = res.userList;
            }
          }
        })
      },
      // 新增好友请求
      handleAddFriend (user) {
        let access_token = window.localStorage.getItem('access_token');
        this.$prompt(' ', '申请理由', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(({value}) => {
          createApply({targetId: user.id, reason: value, access_token: access_token}).then(res => {
            if (parseInt(res.status) === 1) {
              this.$set(user, 'can_apply', false)
            }
          })
        })
      }
     
    },

    mounted () {
      // this.handleUserList();
      this.$store.commit('setPage', 2);
    },
    
  }

</script>
<style >
/* 关键字搜索 */
.search_all_friend {
    background-color: #e50838;
    width: 100%;
    height: 0.88rem;
    line-height: 0.88rem;
    position: relative;
}
.search_all_friend .search_span {
    width: 100%;
    height: 0.88rem;
}
.search_all_friend .search_span .icon-sousuo {
    font-size: 0.3rem !important;
    position: absolute;
    left: 0;
    top: 0;
    /* margin: 0rem 0.2rem 0 -0.6rem; */
    box-sizing: border-box;
    height: 0.54em;
    /* margin-bottom: -0.3rem; */
    z-index: 10;
    margin-left: 0.23rem;
}
.search_all_friend .search_span input {
    display: inline-block;
    width: 6.5rem;
    margin: 0 auto;
    margin-left: -0.7rem;
    height: 0.54rem;
    line-height: 0.54rem;
    background-color: #fff;
    margin-top: -0.12rem;
    border-radius: 4px;
    padding-left: 0.5rem;
    font-size: 0.28rem;
}
.search_all_friend .search_span .icon-guanbi {
    position: absolute;
    top: 0;
    right: 0;
    /* margin: 0.14rem 0.12rem 0 0.12rem; */
    font-size: 0.4rem;
    z-index: 10;
    margin-right: 1rem;
    color: #999;
    margin-top: 0.04rem;
}
.search_all_friend .search_cancel {
    margin-top: -0.65rem;
    margin-right: 0.12rem;
    font-size: 0.28rem;
    color: #fff;
}


</style>
